<template>
  <div class="articleEdit">
    {{ activeIndex }}
    <div class="title-deitBtn">
      <span>我的频道</span>
      <van-button round size="mini" @click="iconShow = !iconShow">{{
        iconShow ? '完成' : '编辑'
      }}</van-button>
    </div>

    <div class="checked">
      <van-grid :gutter="10" :border="false">
        <van-grid-item
          v-for="(channel, index) in myChannels"
          :key="index"
          class="van-grid-item-text"
        >
          <van-icon
            name="clear"
            slot="icon"
            v-if="iconShow && !fiexChannel.includes(channel.id)"
            @click="clearChannel(index, channel)"
          />
          <span
            :class="{ highlight: activeIndex == index }"
            slot="text"
            @click="homeLight(index)"
            >{{ channel.name }}</span
          >
        </van-grid-item>
      </van-grid>
    </div>

    <div class="recommend-channel">
      <span>推荐频道</span>

      <div class="checked">
        <van-grid :gutter="10" :border="false">
          <van-grid-item
            v-for="(channel, index) in editAllChannels"
            :key="index"
            @click="addChannel(channel)"
          >
            <span class="van-grid-item-text" slot="text"
              >+
              {{ channel.name }}
            </span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { allChannels } from '@/api/articles.js'
export default {
  props: {
    myChannels: {
      type: Array,
      default: () => {
        return []
      },
    },
    activeIndex: {
      type: Number,
      default: () => {
        return 0
      },
    },
  },
  data() {
    return {
      iconShow: false,
      allChannelsList: [],

      fiexChannel: [0],
    }
  },

  methods: {
    // 获取所有频道列表
    async getAllChannels() {
      let { data: res } = await allChannels()
      console.log(res, 798899)
      this.allChannelsList = res.data.channels
    },

    //删除我的频道
    clearChannel(index, channel) {
      console.log(index)

      /* 
      判断  fiexChannel  中的值和 myChannels的每一项的id进行匹配  
      如果有匹配成功  就表示不能删除，否则可以删除 
      if (this.fiexChannel.includes(channel.id)) {
        return;
      }
     */

      this.myChannels.splice(index, 1)

      if (index <= this.activeIndex) {
        this.$emit('redActiveIndex', this.activeIndex - 1)
      }
    },

    //添加到我的频道
    addChannel(channel) {
      this.myChannels.push(channel)
    },

    // 点击我的频道， 切换到首页并且高亮
    homeLight(index) {
      console.log(index)
      this.$emit('homelight', index)
    },

    // 拿到频道数组的第一项
    getFirst() {
      var res = myChannels[0]
      res.inc
    },
  },

  computed: {
    // 监听所有频道， 一旦某个频道发生变化， 就会被触发
    editAllChannels() {
      return this.allChannelsList.filter((all) => {
        // computed return 出一个数组， 里面包含所有不相等的项
        return this.myChannels.every((my) => {
          // 返回出不相等 every循环要逐个判断
          return my.id != all.id // 判断 我的频道里的 每一项的id 不等于 所有频道里的的id  就终止掉
        })
      })
    },
  },
  created() {
    this.getAllChannels()
  },
}
</script>

<style scoped lang='less'>
.title-deitBtn {
  margin: 100px 0 0 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  span {
    font-size: 30px;
  }
  .van-button {
    width: 100px;
    border: 1px solid red;
    color: red;
  }
}
.checked {
  margin: 20px 20px;
}

/deep/.van-grid-item__icon-wrapper {
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 10px;
  color: #cacaca;
}

/deep/.van-grid-item__content {
  background-color: #f4f5f6;
}
.van-grid-item-text {
  font-size: 10px;
}
.van-grid-item {
  width: 2.13333rem;
  height: 1.14667rem;
}

.recommend-channel {
  & > span {
    padding: 0 40px;
    font-size: 30px;
  }
}

/deep/.van-grid-item__content {
  padding: 0;
}
.highlight {
  color: red;
}
</style>